import React, { Component, PropTypes } from 'react'
import Search from '../../common/components/Search'
import { Table, message, Popconfirm, Button, Col, Icon, Tree } from 'antd'
import { fetchPost } from '../../../utils/request'
import { history } from '../../../utils/config'
import Style from '../Index.less'
import Detail from './Detail'

class Index extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      activeId: '',
      activeItem: {},
      searchParams: {
        list: [
          {
            name: 'Account',
            type: 'text',
            key: 'name',
            className: 'pr20',
            values: ''
          },
          {
            name: 'Name',
            type: 'text',
            key: 'fullName',
            className: 'pr20',
            values: ''
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            values: []
          }
        ]
      },
      data: [],
      page: {
        currentPage: 1,
        pageSize: 13
      },
      params: {
        name: '',
        fullName: ''
      }

    }
  }

  componentDidMount () {
    this.getData()
  }

  getData () {
    fetchPost(
      `/admin/list?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, this.state.params).then(res => {
      if (res.code === 0) {
        if (res.data !== null) {
          let data = res.data.list
          if (!data.length) {
            this.setState({
              data: null,
              page: {
                currentPage: 1,
                pageSize: 13
              },
              activeId: null,
              activeItem: null
            })
          } else {
            this.setState({
              data,
              page: res.data.page,
              activeId: data[0].id,
              activeItem: data[0]
            })
          }
        }
      } else {
        message.error(res.msg)
      }
    })
  }

  nextPage (currentPage) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage
      }
    }, () => {
      this.getData()
    })
  }

  changeField (value) {
    this.setState({
      params: value
    }, () => {
      this.getData()
    })
  };

  forbiddenAdmin (record) {
    fetchPost(`/admin/${record.id}/updateadminstatus`, { adminStatus: 1, adminId: record.id }).then(res => {
      if (res.code === 0) {
        message.success('禁用成功')
        this.getData()
      } else {
        message.error(res.msg)
      }
    })
  }

  editAdmin (item = {}) {
    if (item.id) {
      history.push({
        pathname: `/admin/edit/${item.id}`,
        state: {
          data: item
        }
      })
    } else {
      history.push('/admin/add')
    }
  }

  recoveryAdmin (record) {
    fetchPost(`/admin/${record.id}/updateadminstatus`, { adminStatus: 0, adminId: record.id }).then(res => {
      if (res.code === 0) {
        message.success('恢复成功')
        this.getData()
      } else {
        message.error(res.msg)
      }
    })
  }

  deleteAdmin (item) {
    fetchPost(`/admin/${item.id}/deleteadmin`, { adminId: item.id }).then(res => {
      if (res.code === 0) {
        message.success('删除成功')
        this.getData()
      } else {
        message.error(res.msg)
      }
    })
  }

  clickRow (activeItem) {
    this.setState({
      activeItem
    })
  }

  changeRowStyle (record) {
    if (record.id === this.state.activeItem.id) {
      return Style.activeRow
    } else {
      return ''
    }
  }

  render () {
    let self = this
    const columns = [
      {
        title: 'Login Account',
        dataIndex: 'name',
        key: 'name',
        width: 150,
        fixed: 'left'
      }, {
        title: 'Last Name',
        dataIndex: 'fullName',
        key: 'fullName',
        width: 100,
        fixed: 'left'
      },
      {
        title: 'Role',
        dataIndex: 'roles',
        key: 'roles'
        // render: (text, record) => {
        //   return (
        //     <div>
        //       {
        //         text.split(';').map(item => {
        //           return item + '...'
        //         })
        //       }
        //     </div>
        //   )
        // }
      }, {
        title: 'Product Type',
        dataIndex: 'productType',
        key: 'productType',
        width: 100,
        fixed: 'right'
      },
      {
        title: 'Operate',
        dataIndex: '',
        key: '',
        width: 200,
        fixed: 'right',
        render: (text, record) => {
          let item = record
          return (
            <div>
              <a className='operateBtn'
                 onClick={() => { this.editAdmin(item) }}
                 href='javascript:;'>Update</a>

              {
                record.status === 1
                  ? <span className={Style.forbiddenTip}>Disabled</span>
                  : <Popconfirm title='Please confirm disabled this one?'
                                onConfirm={() => { this.forbiddenAdmin(item) }}
                                okText='Confirm' cancelText='Cancel'>
                    <a className='operateBtn' href='javascript:;'>Disable</a>
                  </Popconfirm>
              }

              {
                record.status === 1 ? <a className='operateBtn'
                                         onClick={() => {
                                           this.recoveryAdmin(item)
                                         }} href='javascript:;'>Enable</a>
                  : null
              }

              <Popconfirm title='Please confirm delete this one?'
                          onConfirm={() => { this.deleteAdmin(item) }}
                          okText='Determine' cancelText='Cannel'>
                <a className='operateBtn' href='javascript:;'>DEL</a>
              </Popconfirm>

            </div>
          )
        }
      }]

    const pagination = {
      total: self.state.page.totalCount,
      pageSize: self.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextPage(current)
      }
    }

    return (
      <div>
        <div className={Style.title}>
          <Icon className={Style.icon} type='tag-o'/>
          Administrator Manage Grid
          <Button className='ml20' onClick={() => { this.editAdmin() }}
                  type='primary'>
            New
          </Button>
        </div>

        <div className='searchWrapper'>
          <Search changeParams={(value) => {
            this.changeField(value)
          }} searchParams={this.state.searchParams}/>
        </div>

        <div>
          <Col span={16}>
            <Table pagination={pagination}
                   key='id'
                   scroll={{ x: 1000 }}
                   columns={columns}
                   dataSource={self.state.data}
                   loading={self.state.loading}
                   bordered
                   size='small'
                   onRowClick={(record, index) => {
                     this.clickRow(record)
                   }}
                   rowClassName={(record) => (
                     this.changeRowStyle(record)
                   )}
            />
          </Col>

          <Col span={8}>
            <div className='pl10'>
              <Detail activeItem={this.state.activeItem}/>
            </div>
          </Col>

        </div>

      </div>
    )
  }
}

export default Index
